import {FC, useEffect, useRef, useState} from "react";
import CartonImage from '../../assets/cartoon.jpg'
import MovieImage from '../../assets/movie.png'
import LifeImage from '../../assets/life.jpg'
import FoodImage from '../../assets/food.jpg'
import LogoImage from '../../assets/logo.png'
import styles from './styles.module.scss'
import classNames from "classnames";
const TAB_HEIGHT:number = 56;
const tabs = [
    {
        key: 'carton',
        title: '动画',
        coverImg: CartonImage
    },
    {
        key: 'food',
        title: '美食',
        coverImg: FoodImage
    },
    {
        key: 'movie',
        title: '电影',
        coverImg: MovieImage
    },
    {
        key: 'life',
        title: '生活',
        coverImg: LifeImage
    }
]
const SecondSection: FC = () => {
    // tab选中状态
    const [activeTab, setActiveTab] = useState<string>('carton')
    // tabs是否吸顶
    const [isFixed,setIsFixed ] = useState<boolean>(false)

    const secondSectionRef = useRef<HTMLDivElement>(null)
    const activate = (key: string) => {
        setActiveTab(key)
        const tabContentEl = document.querySelector(`[data-id=${key}]`)
        if (tabContentEl) {
            tabContentEl.scrollIntoView({ behavior: 'smooth' })
        }
    }
    const onScroll = () => {
        if (secondSectionRef.current) {
           const { top }  = secondSectionRef.current.getBoundingClientRect();
           setIsFixed(top <= 0)
            const sectionNodes = secondSectionRef.current.querySelectorAll('section')
            Array.from(sectionNodes).forEach(sectionEl => {
                const { top } = sectionEl.getBoundingClientRect()
                const key = sectionEl.getAttribute('data-id') || ''
                if (top <= TAB_HEIGHT + 16 ) {
                    setActiveTab(key)
                }
            })
        }
    }

    useEffect(() => {
        window.addEventListener('scroll', onScroll)
        return () => {
            window.removeEventListener('scroll', onScroll)
        }
    },[])

    return (
        <div className={styles.secondSection} ref={secondSectionRef}>
            {/*Tabs*/}
            <ul className={classNames({[styles.fixed]: isFixed})}>
                {
                    tabs.map(tab => (
                        <li key={tab.key} onClick={() => activate(tab.key)}>
                            <span>{tab.title}</span>
                            {/*{ activeTab === tab.key && <span className={styles.line} /> }*/}
                            {/*<span className={`${styles.line} ${ activeTab === tab.key && 'visible' }`} />*/}
                            <span className={classNames(styles.line, {[styles.visible]: activeTab === tab.key})}/>
                        </li>
                    ))
                }
            </ul>

            {/*Tabs-Content*/}
            <div>
                {
                    tabs.map(tab => (
                        <section data-id={tab.key} key={tab.key}>
                            <h2>{tab.title}</h2>
                            <img src={tab.coverImg} alt={tab.key}/>
                        </section>
                    ))
                }
            </div>
            {/*吸底按钮*/}
            <div className={classNames(styles.btnWrapper,{[styles.visible]: isFixed})}>
                <img src={LogoImage} alt="logo" />
                <a href={'https://www.bilibili.com/'} target={'_blank'} rel="noreferrer">
                    <button>App 内打开</button>
                </a>
            </div>
        </div>
    )
}

export default SecondSection
